import React, { Component } from 'react';

class App extends Component {

  // 使用 es7 类的属性和方法 --------- 推荐使用
  // 初始状态一定要放在 state 中，在 state 中你可以自定义自己想要的属性
  // 因为我们需要使用 setState 来进行值的改变
  state = {
    msg: '你好中国'
  }


  render() {
    return (
      <div>
        App <h1>{this.state.msg}</h1>


        <button onClick={()=>{


          // this.setState({
          //   msg: '很多人都不喜欢银行，每次去取钱的时候都提醒余额不足，没钱你开啥银行。'
          // })

          this.setState({
            msg: '很多人都不喜欢银行，每次去取钱的时候都提醒余额不足，没钱你开啥银行。'
          }, ()=> {
            // 使用 setState 的时候，第二个参数是一个回调函数，该函数会等待真实 DOM 更新之后调用
            console.log(document.querySelector('h1').innerText);
          })

          // 因为我们修改数据是异步的，然后我们更新的时候是先更新的虚拟 DOM
          // 所以我这里直接找到 h1 的内容，会发现该内容是之前的值
          // console.log(document.querySelector('h1').innerText);

        }}>点击修改 msg</button>
      </div>
    );
  }
}

export default App;
